<template>
  <div class="details">
    <van-tabs 
    class="mainDetails"  
    scrollspy
    sticky
    color='#666ee8' 
    >
      <template #nav-left>
        <van-icon class="nav-button" name="arrow-left" @click="toPrev" />
      </template>
      <template #nav-right>
         <van-icon class="nav-button" name="share-o" @click="showShare = true" />
         
      </template>
      <van-tab title="商品">
        <div>
          <div class="imgBox">
            <van-swipe :autoplay="3000">
              <van-swipe-item v-for="(image, index) in detailsInfo.imgs" :key="index">
                <img v-lazy="image" />
              </van-swipe-item>
            </van-swipe>
          </div>
          <div class="separate good-info">
            <h3>￥999 <i>9999</i> <span>新品促销</span></h3>
            <h4>{{detailsInfo.title}}</h4>
            <ul>
              <li v-for="item,index in detailsInfo.label" :key="index"><span></span>{{item}}</li>
            </ul>
          </div>
          <div class="separate">
            <van-cell is-link @click='clickCell'>
              <template #title>
                <span class="title">优惠</span>
              </template>
              <ul class="value">
                <li>1</li>
                <li>2</li>
                <li>3</li>
              </ul>
            </van-cell>
            <van-cell is-link>
              <template #title>
                <span class="title">活动</span>
              </template>
              <span class="value">新人特惠活动专区</span>
            </van-cell>
            <van-popup
                v-model="show"
                closeable
                position="bottom"
                round
                :style="{ height: '50%' }"
            />
          </div>
          <div class="separate">
            <van-cell is-link @click="shopInfo">
              <template #title>
                <span class="title">已选</span>
              </template>
              <span class="value">铃兰香</span>
            </van-cell>
            <van-cell is-link @click="isShowAddress">
              <template #title>
                <span class="title">送至</span>
              </template>
              <span class="value">地址</span>
            </van-cell>
            <van-cell is-link>
              <template #title>
                <span class="title">服务</span>
              </template>
              <span class="value">满88免运费</span>
            </van-cell>
            <ul class="guarantee">
              <li v-for="item,index in detailsInfo.waiter" :key="index"><span></span>{{item}}</li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="评价">
        <div>
          <van-cell is-link value='好评率' title-class="title-evaluate">
              <template #title>
                <b>商品评价</b>
                <span>4.6万+</span>
              </template>
          </van-cell>
        </div>
        <div class="evaluation-content">
          <div class="concise-evaluation">
            <span>香味很正</span>
            <span>包装很好</span>
            <span>发货及时</span>
          </div>
          <div class="users">
              <div>
                <img src="http://placehold.it/107" alt="">
                <div>
                  <h3>用户名</h3>
                  <van-rate
                      v-model="value"
                      :size="10"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                      readonly
                      class="pl"
                    />
                </div>
              </div>
          </div>
          <p>味道很清新，很想之前闻过的味道，不会很冲，包装也很好，还送了体验装，好评哦～</p>
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <span>铃兰香，30ml</span>
        </div>
        <div class="viewAll separate">
          <button @click="clickHandler">查看全部评价</button>
        </div>
        <div class="shop separate">
          <div class="shopName">
            <img src="http://placehold.it/107" alt="">
            <div>
              <h3> kao 花王旗舰店</h3>
              <van-rate
                      v-model="value"
                      :size="10"
                      color="#ffd21e"
                      void-icon="star"
                      void-color="#eee"
                      readonly
                      class="pl"
              />
            </div>
            <div>
              <span>联系客服</span>
              <span>进店逛逛</span>
            </div>
          </div>
          <div class="recommended">
            <div><span>店铺推荐</span><b>查看全部 <van-icon name="arrow" /></b></div>
            <ul class="recommended-list">
              <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.siglff.com%2Fd%2Ffile%2F2019-03-20%2F1553079010869358.jpg&refer=http%3A%2F%2Fwww.siglff.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619052518&t=aaaf80bfccaa2d82d90dd51537ae729a"> <p>VELVET香水第五大道香水绿茶香水女士</p> <span class="price"><span>￥</span>99.0</span></li>
              <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.siglff.com%2Fd%2Ffile%2F2019-03-20%2F1553079010869358.jpg&refer=http%3A%2F%2Fwww.siglff.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619052518&t=aaaf80bfccaa2d82d90dd51537ae729a"> <p>VELVET香水第五大道香水绿茶香水女士</p> <span class="price"><span>￥</span>99.0</span></li>
              <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.siglff.com%2Fd%2Ffile%2F2019-03-20%2F1553079010869358.jpg&refer=http%3A%2F%2Fwww.siglff.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619052518&t=aaaf80bfccaa2d82d90dd51537ae729a"> <p>VELVET香水第五大道香水绿茶香水女士</p> <span class="price"><span>￥</span>99.0</span></li>
              <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.siglff.com%2Fd%2Ffile%2F2019-03-20%2F1553079010869358.jpg&refer=http%3A%2F%2Fwww.siglff.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619052518&t=aaaf80bfccaa2d82d90dd51537ae729a"> <p>VELVET香水第五大道香水绿茶香水女士</p> <span class="price"><span>￥</span>99.0</span></li>
              <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.siglff.com%2Fd%2Ffile%2F2019-03-20%2F1553079010869358.jpg&refer=http%3A%2F%2Fwww.siglff.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619052518&t=aaaf80bfccaa2d82d90dd51537ae729a"> <p>VELVET香水第五大道香水绿茶香水女士</p> <span class="price"><span>￥</span>99.0</span></li>
              <li><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.siglff.com%2Fd%2Ffile%2F2019-03-20%2F1553079010869358.jpg&refer=http%3A%2F%2Fwww.siglff.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1619052518&t=aaaf80bfccaa2d82d90dd51537ae729a"> <p>VELVET香水第五大道香水绿茶香水女士</p> <span class="price"><span>￥</span>99.0</span></li>
            </ul>
          </div>
        </div>
      </van-tab>
      <van-tab title="详情">
        <div class="separate detailsInfo">
          <h3>宝贝详情</h3>
          <img v-for="item,index in detailsInfo.details" :src="item" alt="" :key="index">
        </div>
      </van-tab>
      <van-tab title="推荐">
        <div class="goods-recommend">
          <h3>宝贝推荐</h3>
          <ul>
            <li><goods></goods></li>
            <li><goods></goods></li>
            <li><goods></goods></li>
            <li><goods></goods></li>
            <li><goods></goods></li>
            <li><goods></goods></li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <van-goods-action class="nav">
        <van-goods-action-icon icon="chat-o" text="客服" color='#ccc'/>
        <van-goods-action-icon icon="shop-o" text="店铺" color='#ccc'/>
        <van-goods-action-icon :icon="isCollection?'star':'star-o'" :text="isCollection?'已收藏':'收藏'" :color="isCollection?'#666ee8':'#ccc'" @click='collectionHandler' />
        <van-goods-action-button color='#ffc71c' type="warning" text="加入购物车" />
        <van-goods-action-button color="#666ee8" type="danger" text="立即购买" />
    </van-goods-action>
    <van-sku
      v-model="isShow"
      :sku="sku"
      :goods="goods"
      @buy-clicked="onBuyClicked"
      @add-cart="onAddCartClicked"
    />
    <Address></Address>
  </div>
</template>

<script>
import Vue from 'vue';
import { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant';
import { Tab, Tabs } from 'vant';
import { Popup } from 'vant';
import { Cell, CellGroup } from 'vant';
import { Icon } from 'vant';
import { ShareSheet } from 'vant';
import { Sku } from 'vant';
import { Toast } from 'vant';
import { Rate } from 'vant';
Vue.use(Rate);
Vue.use(Toast);
import goods from '@/views/details/GoodsEva'
import Address from './Address'
import { mapActions } from 'vuex'
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';

Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Sku);
Vue.use(ShareSheet);
Vue.use(Icon);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(Popup);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(GoodsAction);
Vue.use(GoodsActionButton);
Vue.use(GoodsActionIcon);
export default {
  components:{
    goods,Address
  },
  async mounted() {
    const detailsInfo = await this.$http.post({
      url: '/api/goods/good_detail',
      data:{
        "id":1001
      }
    })
    this.detailsInfo = detailsInfo[0];
    console.log(this.detailsInfo)
  },
  data() {
    return {
      bgColor:'#FFFFFF00',
      isCollection:false,
      show:false,
      showShare: false,
      isShow: false,
      isCollection: false,
      value:5,
      detailsInfo:{},
      sku: {
        tree: [
          {
            k: '颜色',
            k_c: 'sl',
            v:[
              {
                id:'1',
                name:'红色',
              },
              {
                id:'2',
                name:'黄色',
              },
              {
                id:'3',
                name:'紫色',
              }
            ],
          },
          {
            k: '净含量',
            k_c: 's2',
            v:[
              {
                id:'1',
                name: '30ml'
              },
              {
                id:'2',
                name: '50ml'
              },
              {
                id:'3',
                name: '90ml'
              },
            ]
          }
        ],
        list:[],
        price: '999.00',
        stock_num: 227, 
      },
      goods: {

      },
      messageConfig: {
      },
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '分享海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    }
  },
  methods: {
    ...mapActions(['addressShow']),
    onBuyClicked() {

    },
    onAddCartClicked() {
      
    },
    clickCell() {
      this.show = true
    },
    toPrev() {
      this.$router.back()
    },
    clickHandler() {
      this.$router.push({ path: '/Evaluate'})
    },
    shopInfo() {
      this.isShow = true
    },
    isShowAddress() {
      this.addressShow(true);
    },
    collectionHandler() {
      this.isCollection = !this.isCollection
      Toast({
        message: this.isCollection?'收藏成功':'取消收藏',
        duration: 500
       });
    }
   },
  
}
</script>

<style lang="stylus" scoped>
@import '../../assets/stylus/border.styl';
.details
  height 100%
  overflow scroll
  .mainDetails
    padding-bottom 50px
    .van-cell__title
      flex 20
      .title
        font-size .14rem
        color #999
    .title-evaluate
      font-size .16rem
      flex 50
      color #333
      b
        font-weight 400
        margin-right .02rem
      span 
        font-size .12rem
     
    .van-cell__value
      flex 100
    .value
      text-align left 
      flex 2
.nav-button
  line-height.44rem
  padding 0 .2rem
.separate
  border-bottom .08rem solid #f2f2f2
.imgBox
  width 100%
  position relative
  height 4.32rem
  overflow hidden
  .van-swipe
    width 100%
    height 100%
    .van-swipe-item 
      width 100%
      height 100%
      img
        width 100%
        height 4.32rem
.nav
  border-top 1px solid #f2f2f2
  height .5rem

.good-info
  padding 0 .16rem
  h3
    font-size .2rem
    color #FF6262
    line-height .4rem
    i
      color #999
      font-weight 400
      font-size .12rem
      text-decoration line-through
      margin-right  .1rem
    span
      background-color #fff0f0
      font-size .12rem
      font-weight 400
      padding .04rem
      border-radius .05rem
  h4
    font-size .16rem
    color #333
  ul
    display flex 
    li
      font-size .12rem
      color #999
      margin-right .3rem
      line-height .36rem
      span
        display inline-block
        width .04rem
        height .04rem
        background-color #999
        vertical-align middle
        border-radius 100%
        margin-right .04rem

.evaluation-content
  display flex 
  flex-direction column
  padding 0 .16rem
  border_1px(0 0 1px 0, #ccc, solid)
  div 
    flex 1
  .concise-evaluation
    display flex 
    span 
      padding 0 .15rem
      font-size .12rem
      line-height .28rem
      background-color #f0f1fd
      border-radius .14rem
      text-align center
      margin-right .1rem
  .users
    height .4rem
    padding .15rem
    >div
      display flex
      img
        width .4rem
        height .4rem
        border-radius .4rem
        margin-right .1rem
      div
        >h3
          font-size .14rem
  p
    font-size .12rem
    line-height .24rem
  ul
    height .8rem
    display flex 
    justify-content space-around
    li
      width .8rem
      border .01rem solid #ccc
  > span 
    font-size .12rem
    color #999
    line-height .5rem
.viewAll
  display flex 
  justify-content center
  padding .18rem 0
  button
    outline none 
    font-size: .12rem;
    color: #666EE8;
    text-align center 
    width .99rem
    height .26rem
    background-color #fff
    border 1px solid #666ee8
    border-radius .13rem


.detailsInfo
  padding 0 .16rem
  h3
    line-height .48rem
    text-align center
    letter-spacing .05rem
  img 
    width 100%

.shop
  display flex 
  flex-direction column
  .shopName
    // height .72rem
    padding .1rem .16rem
    border_1px(0 0 1px 0)
    display flex
    justify-content space-around
    img 
      width .6rem
      height .6rem
      border-radius .05rem
    div:nth-child(2)
      margin-left .1rem
      h3 
        font-weight 400
        line-height .36rem
    div:nth-child(3)
      // display flex
      // justify-content space-around
      span
        font-size .12rem
        border 1px solid #666ee8
        line-height .5rem
        padding .03rem .08rem
        border-radius .13rem
        margin-left .15rem
        color #666ee8
      span:nth-child(2)
       border none 
       background-color #666ee8
       color #fff
        

  .recommended
    padding 0 .16rem
    div
      display flex 
      justify-content space-between
      line-height .4rem
      span
        font-size .14rem
      b
        font-size .12rem
        font-weight 400
        color #666EE8
        i
          vertical-align middle
    ul
      display flex
      flex-wrap wrap
      li
        flex 33.3%
        img 
          width 1.06rem
          height 1.06rem
        p
          font-size .12rem
          padding-top .1rem
        .price 
          color #FF6262
          font-size .14rem
          font-weight 900
          line-height .40rem
          span 
            font-size .12rem

.goods-recommend
  padding 0 .16rem
  h3
    font-size .16rem
    color #333
    line-height .50rem
  ul
    display flex 
    flex-wrap wrap
    li
      flex 50%
      

.guarantee
  display flex 
  padding 0 .16rem
  
  li
    line-height .5rem
    font-size .12rem
    padding-right .12rem
    color #999
    span
      display inline-block
      width .05rem
      height .05rem
      background #ff6262
      border-radius 100%
      vertical-align middle
      margin-right .07rem
        
</style>